<!-- <template>
    <div class="bullet-screen">
        <transition-group name="bullet" tag="div">
            <div class="bullet" v-for="bullet in bullets" :key="bullet.id"
                :style="{ animationDuration: bullet.duration + 's', fontSize: '10px', display: 'flex', alignItems: 'center', background: 'rgb(121, 169, 255)', color: '#fff' }">
                <img style="width: 20px;height: 20px;" src="../../assets/img/人像.png" alt="">
                {{ bullet.text }}
            </div>
        </transition-group>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';

interface Bullet {
    id: number;
    text: string;
    duration: number; // 动画持续时间
}

export default defineComponent({
    setup() {
        const bullets = ref<Bullet[]>([]);
        let bulletId = 0;
        let interval: ReturnType<typeof setInterval>;

        // 生成不重复的弹幕文本
        const generateUniqueText = (): string => {
            return `安徽六安msMv69V1kM订购了涂晓瑜医生的图片咨询服务`;
        };

        // 添加弹幕
        const addBullet = () => {
            const newText = generateUniqueText();

            // 检查是否已有该文本的弹幕
            if (bullets.value.some(bullet => bullet.text === newText)) {
                return; // 如果已存在，直接返回，避免添加
            }

            const newBullet: Bullet = {
                id: bulletId++,
                text: newText,
                duration: Math.random() * 5 + 3, // 随机设置动画持续时间
            };

            // 如果已有两条弹幕，先移除最旧的一条
            if (bullets.value.length >= 2) {
                bullets.value.shift(); // 移除最旧的一条
            }

            bullets.value.push(newBullet);

            // 动画结束后移除弹幕
            setTimeout(() => {
                bullets.value = bullets.value.filter(b => b.id !== newBullet.id);
            }, (newBullet.duration + 1) * 1000); // 动画结束后加上1秒的延迟
        };

        // 启动弹幕自动添加
        onMounted(() => {
            interval = setInterval(addBullet, 3000); // 每3秒添加一条新弹幕
            addBullet(); // 初始添加一条弹幕
        });

        // 清理定时器
        onBeforeUnmount(() => {
            clearInterval(interval);
        });

        return {
            bullets,
        };
    },
});
</script>

<style scoped>
.bullet-screen {
    position: fixed;
    bottom: 50px;
    width: 100%;
    height: 80px;
    /* 弹幕区域高度 */
    overflow: hidden;
    background-color: #f9f9f9;
}

.bullet {
    position: absolute;
    bottom: 0;
    /* 从底部开始 */
    left: 50%;
    transform: translateX(-50%);
    /* 居中 */
    white-space: nowrap;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    animation: scroll-up linear forwards;
    /* 应用滚动动画 */
    border-radius: 50px;

}

@keyframes scroll-up {
    0% {
        transform: translate(-50%, 100%);
        /* 从底部进入 */
    }

    100% {
        transform: translate(-50%, -100%);
        /* 向上移动到视口外 */
    }
}

.bullet-enter-active {
    transition: opacity 0.5s;
}

.bullet-leave-active {
    transition: opacity 0.5s;
}

.bullet-enter,
.bullet-leave-to {
    opacity: 0;
}
</style> -->

<template>
    <div class="bullet-screen">
        <transition-group name="bullet" tag="div">
            <div class="bullet" v-for="bullet in bullets" :key="bullet.id" :style="{
                animationDuration: bullet.duration + 's', fontSize: '14px', display: 'flex',
                alignItems: 'center', background: 'rgb(121, 169, 255)', color: '#fff', borderRadius: '50px'
            }">
                <img style="width: 20px; height: 20px;" src="../../assets/img/人像.png" alt="">
                {{ bullet.text }}
            </div>
        </transition-group>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';

interface Bullet {
    id: number;
    text: string;
    duration: number; // 动画持续时间
}

export default defineComponent({
    setup() {
        const bullets = ref<Bullet[]>([]);
        let bulletId = 0;
        let interval: ReturnType<typeof setInterval>;

        const phrases = [
            '用户A 北京昌平哈哈哈订购了涂晓瑜医生的图片咨询服务',
            '用户B 安徽六安69kM订购了涂晓瑜医生的图片咨询服务',
            '用户C 河南洛阳NaiSei订购了涂晓瑜医生的图片咨询服务'
        ];

        // 生成不重复的弹幕文本
        const generateUniqueText = (): string => {
            const randomIndex = Math.floor(Math.random() * phrases.length);
            return phrases[randomIndex];
        };

        const addBullet = () => {
            const newText = generateUniqueText();

            // 检查是否已有该文本的弹幕
            if (bullets.value.some(bullet => bullet.text === newText)) {
                return; // 如果已存在，直接返回，避免添加
            }

            const newBullet: Bullet = {
                id: bulletId++,
                text: newText,
                duration: Math.random() * 5 + 3, // 随机设置动画持续时间
            };

            bullets.value.push(newBullet);

            // 动画结束后移除弹幕
            setTimeout(() => {
                bullets.value = bullets.value.filter(b => b.id !== newBullet.id);
            }, (newBullet.duration + 1) * 800); // 动画结束后加上1秒的延迟
        };

        // 启动弹幕自动添加
        onMounted(() => {
            interval = setInterval(addBullet, 3000); // 每2秒添加一条新弹幕
            // addBullet(); // 初始添加一条弹幕
        });

        // 清理定时器
        onBeforeUnmount(() => {
            clearInterval(interval);
        });
        return {
            bullets,
        };
    },
});
</script>

<style scoped>
.bullet-screen {
    position: fixed;
    bottom: 50px;
    width: 100%;
    height: 80px;
    /* 弹幕区域高度 */
    overflow: hidden;
    background-color: transparent;
}

.bullet {
    position: absolute;
    bottom: 0;
    /* 从底部开始 */
    left: 50%;
    transform: translateX(-50%);
    /* 居中 */
    white-space: nowrap;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 3px 3px;
    border-radius: 5px;
    font-size: 14px;
    animation: scroll-up linear forwards;
    /* 应用滚动动画 */
}

@keyframes scroll-up {
    0% {
        transform: translate(-50%, 100%);
        /* 从底部进入 */
    }

    100% {
        transform: translate(-50%, -100%);
        /* 向上移动到视口外 */
    }
}

.bullet-enter-active {
    transition: opacity 0;
}

.bullet-leave-active {
    transition: opacity 0.5s;
}

.bullet-enter,
.bullet-leave-to {
    opacity: 0;
}
</style>
